<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <style>
        .swiper-slide {
            width: 3.50rem;
            height: 2.64rem;
        }

        .swiper-slide img,
        .swiper-slide img {
            width: 3.5rem;
            height: 2.64rem;
            border-radius: 0.05rem;
        }

        .swiper-slide img,
        .swiper-slide video {
            width: 3.5rem;
            height: 2.64rem;
            border-radius: 0.05rem;
            background: #000;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="shangpingxiangqing  store-detail">
            <div class="main store goods-detail">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide flex-x-c" v-for="(item,index) in detailOtherData.banners" :key="index">
                            <img v-lazy="item.imageUrl" alt="" v-if="!item.playURL"
                                @click="preview(index,detailOtherData.banners)">
                            <div class="videoPlay main-img" v-else>
                                <video :id="'player'+index" controls preload="none" webkit-playsinline="true"
                                    playsinline="true" :poster="item.imageUrl" x5-playsinline>
                                    <source :src="item.playURL" type="video/mp4" />
                                </video>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="detail-container">
                    <div class="ask-rent">
                        <div class="rent-name">{{detailOtherData.title}}</div>
                        <div class="parts-price">
                            <div class="unit-price" v-if="detailOtherData.price<10000 && detailOtherData.price!==null">¥
                            </div>
                            {{detailOtherData.price | filterPrice}}
                        </div>
                        <div class="rent-tag-store">
                            <!--                            <div v-if="detailOtherData.isSelf" class="rent-store">{{detailOtherData.shopName}}</div>-->
                            <div class="rent-store">{{detailOtherData.isSelf ? '自营' : '商家'}}</div>
                            <div class="rent-store" v-for="(item,index) in detailOtherData.tags"
                                @click="goTagDetail(item)">{{item.name}}</div>
                        </div>
                    </div>
                    <div class="discount-container"
                        v-if="detailOtherData.promotions && detailOtherData.promotions.length > 0">
                        <div class="discount-activity-container" v-for="promotion in detailOtherData.promotions">
                            <div class="discount-activity"
                                v-if="promotion.promotionItems && promotion.promotionItems.length > 0"
                                v-for="item in promotion.promotionItems">
                                <span
                                    style="display: inline-block;min-width: .8rem;margin-bottom: .06rem;">满{{item.meetPrice}}减{{item.reducePrice}}</span>
                                <span style="color:#c1c1c1">倒计时：{{promotion.countDown}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="thing-detail">
                        <div class="production-params">
                            <div class="params-info">{{title == 'PARTS'?'配件详情':'设备详情'}}</div>
                            <div class="param">
                                <div class="param-items">
                                    <div class="type param-item param-key">{{title == 'PARTS'?'配件类型':'机械类型'}}</div>
                                    <div class="type-value param-item param-value">
                                        {{detailOtherData.typeName}}
                                    </div>
                                </div>
                                <div class="param-items">
                                    <div class="brand param-item param-key">机械品牌</div>
                                    <div class="brand-value param-item param-value">{{detailOtherData.brandName}}</div>
                                </div>
                            </div>
                            <div class="param" v-if="title != 'PARTS'">
                                <!-- <div class="param-items">
                                    <div class="type param-item param-key">出厂日期</div>
                                    <div class="type-value param-item param-value">
                                        {{handleTimeYMD(detailOtherData.deliveryDate)}}
                                    </div>
                                </div> -->
                                <div class="param-items">
                                    <div class="brand param-item param-key">机械型号</div>
                                    <div class="brand-value param-item param-value">{{detailOtherData.modelName}}</div>
                                </div>
                            </div>
                            <!-- <div class="param" v-if="title != 'PARTS'">
                                <div class="param-items" v-if="detailOtherData.oldYear != 0">
                                    <div class="type param-item param-key">工作时长</div>
                                    <div class="type-value param-item param-value">{{detailOtherData.workHour}} 小时</div>
                                </div>
                                <div class="param-items">
                                    <div class="type param-item param-key">新旧程度</div>
                                    <div class="type-value param-item param-value">
                                        {{detailOtherData.oldYear === 1 ? ("二手," + detailOtherData.oldDesc) : "全新"}}
                                    </div>
                                </div>
                            </div> -->
                            <div class="param">
                                <div class="param-items">
                                    <div class="brand param-item param-key">所在地区</div>
                                    <div class="brand-value param-item param-value">
                                        {{detailOtherData.addressName}},{{detailOtherData.address}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="desc param-item">
                            <div class="desc-title">{{title == 'PARTS'?'配件简介':'机械简介'}}</div>
                            <pre class="desc-content"
                                v-if="detailOtherData.intro!=null&&detailOtherData.intro.indexOf('/>')==-1">{{detailOtherData.intro?detailOtherData.intro:'无相关简介'}}</pre>
                            <div v-else class="desc-content-intro"
                                v-html="detailOtherData.intro?detailOtherData.intro:'无相关简介'"></div>
                        </div>
                    </div>
                    <div class="about-recommend">
                        <div class="recommend-info">相关推荐</div>
                        <div class="recommend-container">
                            <div @click="gotoDetail(item)" class="horizental cangchu-item recommend-item"
                                v-for="(item,index) in listRecommends" :key="index">
                                <img v-lazy="item.imageUrl?item.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/item_img.png'" alt=""
                                    class="preview-img">
                                <div class="center">
                                    <p class="recommend-name">{{item.title}}</p>
                                    <div class="info">
                                        <div class="info-item" v-if="item.addressName">{{item.addressName}}</div>
                                        <div class="info-item">{{handleTimeYMD(item.publishTime)}}</div>
                                    </div>
                                    <div class="price">
                                        <div class="unit-price" v-if="item.price<10000 && item.price != null">¥</div>
                                        {{item.price | filterPrice}}
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="opt-btn">{{item.type == 0 ? '出售' : (item.type == 1 ? '出租' : '配件')}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js "></script>
    <script src="../../script/swiper.min.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script>
        apiready = function () {
            imgLazyLoad();
            var photoBrowser = api.require('photoBrowser');
            vm = new Vue({
                el: '.app',
                data() {
                    return {
                        value: undefined,
                        onlineBuy: false,
                        module: api.pageParam.module,
                        detailOtherData: api.pageParam.detailOtherData,
                        refreshTimes: 0,
                        listRecommends: [],
                        swipeDuration: 3000,
                        preIndex: 0
                    }
                },
                created() {
                    // console.log(JSON.stringify(api.pageParam.detailOtherData));
                    this.title = api.pageParam.title
                },
                filters: {
                    filterPrice: filterPrice
                },
                mounted: function () {
                    let vm = this
                    vm.init()
                    vm.initSwipe()
                    vm.getRecommendsData()
                    vm.openFooter()
                },
                methods: {
                    formatHms(endDateTime, startDateTime) {
                        var seconds = (parseInt(endDateTime - startDateTime) / 1000);
                        var h = Math.floor(seconds / (60 * 60));
                        var m = Math.floor(seconds % (60 * 60) / 60);
                        var s = Math.floor(seconds % (60 * 60) % 60);
                        return (h < 10 ? ('0' + h) : h) + ' 时 ' + (m < 10 ? ('0' + m) : m) + ' 分 ' + (s < 10 ? ('0' + s) : s) + ' 秒';
                    },
                    preview(index, medias) {
                        previewPhoto(index, medias, photoBrowser)
                    },
                    goTagDetail(item) {
                        api.openWin({
                            name: 'tag_win',
                            url: '../common/tag_win.html',
                            bounces: false,
                            pageParam: { item: item }
                        });
                    },
                    init() {
                        var vm = this;
                        if (this.detailOtherData.promotions && this.detailOtherData.promotions.length > 0) {
                            this.detailOtherData.promotions.map((item, index) => {
                                var now = new Date().getTime()
                                vm.$set(item, 'countDown', vm.formatHms(item.endTime, now))
                                setInterval(() => {
                                    var now = new Date().getTime()
                                    vm.$set(item, 'countDown', vm.formatHms(item.endTime, now))
                                }, 1000)
                            })
                        }
                        vm.detailOtherData.banners.map(item => {
                            if (item.videoId) {
                                common("getVideoPlay")(item.videoId, function (ret) {
                                    if (ret && ret.data && ret.data.videoBase) {
                                        var videoId = ret.data.videoBase.videoId
                                        var index = vm.detailOtherData.banners.findIndex(
                                            target => {
                                                return target.videoId == videoId
                                            })
                                        vm.$set(vm.detailOtherData.banners[index], 'playURL',
                                            ret.data.playInfoList[0].playURL)
                                    }
                                })
                            }
                        })
                    },
                    initSwipe() {
                        var mySwiper = new Swiper('.swiper-container', {
                            pagination: '.swiper-pagination',
                            // autoplay: 3000,
                            onTouchStart: function (swiper, even) {
                                api.setFrameAttr({
                                    name: 'goods_detail_frm',
                                    bounces: false
                                });
                            },
                            onTouchEnd: function (swiper) {
                                api.setFrameAttr({
                                    name: 'goods_detail_frm',
                                    bounces: true
                                });
                            },
                            onSliderMove: function (swiper, event) {
                                var curDom = document.querySelector('#player' + swiper.activeIndex)
                                if (curDom) curDom.pause()
                            },
                        })
                    },
                    openFooter() {
                        api.openFrame({
                            name: 'footer_common',
                            url: '../home/footer_common.html',
                            reload: true,
                            rect: {
                                marginTop: 1000,
                                marginBottom: 0,
                                w: 'auto'
                            },
                            pageParam: api.pageParam
                        });
                    },

                    purchase() {
                        var shops = [{
                            products: [{
                                id: this.detailOtherData.id,
                                quantity: 1,
                            }],
                            shopId: this.detailOtherData.shopId
                        },]
                        api.openWin({
                            name: 'create_order_win',
                            url: '../store/create_order_win.html',
                            bounces: false,
                            pageParam: {
                                shops: shops
                            }
                        });
                    },
                    gotoDetail(item) {
                        api.openWin({
                            name: "goods_detail_win",
                            url: "goods_detail_win.html",
                            bounces: false,
                            reload: true,
                            pageParam: {
                                detailItem: item,
                                title: api.pageParam.title
                            }
                        })
                    },
                    goStore() {
                        api.openWin({
                            name: 'my_store_index',
                            url: '../my_store/my_store_index.html',
                            bounces: false,
                            pageParam: {
                                id: this.detailOtherData.userId,
                                queryOwn: api.pageParam.queryOwn
                            }
                        });
                    },
                    call() {
                        var vm = this
                        // var phone = this.detailOtherData.contactTels.split(',')
                        var phone = this.detailOtherData.phone 
                        console.log(JSON.stringify(this.detailOtherData.phone))
                        api.actionSheet({
                            cancelTitle: '取消',
                            buttons: [phone]
                        }, function (ret, err) {
                            if (ret.buttonIndex > 1) return false;
                            index.product("addInquiry")(vm.detailOtherData.id, function (ret) { })
                            api.call({
                                type: 'call_type',
                                number: phone// phone[ret.buttonIndex - 1]
                            });
                        });
                    },
                    backPage() {
                        api.closeWin({});
                    },
                    addCart() {
                        cart("addCart")({
                            productId: this.detailOtherData.id,
                            quantity: 1
                        }, function (ret) {
                            toastMiddle("加入购物车成功")
                            api.sendEvent({ name: 'refreshCart' })
                        })
                    },
                    getRecommendsData: function (status) {
                        let vm = this
                        const param = {
                            notIds: [vm.detailOtherData.id],
                            types: [vm.detailOtherData.type],
                            pageNum: 1,
                            pageSize: 3,
                            status: 1,
                            checkStatus: 1,
                            orderBy: 'HIT_DESC',
                        }
                        if (status) {
                            param.brandIds = [vm.detailOtherData.brandId]
                            param.categoryIds = []
                        } else {
                            param.categoryIds = [vm.detailOtherData.categoryId]
                        }
                        index.product("getListProducts")(param, function (ret) {
                            vm.listRecommends = ret.data.list
                        })
                    }
                },
            })
            // 下拉刷新
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function (ret, err) {
                vm.refreshTimes++
                vm.getRecommendsData(true)
                api.refreshHeaderLoadDone()
            });
            api.addEventListener({
                name: 'sendGoodsDetail'
            }, function (ret, err) {
                var type = ret.value.type
                if (type == 'goStore') {
                    if (!checkToken()) return false;
                    vm.goStore()
                } else if (type == 'call') {
                    if (!checkToken()) return false;
                    vm.call()
                } else if (type == 'goIM') {
                    gIMCommon(vm.detailOtherData.userId)
                } else if (type == 'addCart') {
                    if (!checkToken()) return false;
                    vm.addCart()
                } else if (type == 'purchase') {
                    if (!checkToken()) return false;
                    vm.purchase()
                }
            });
        }
    </script>
</body>

</html>